<@override name="content">
<div class="pagination pagination-centered">
  <div class="pull-left">
    <a href="contest/recent" class="btn btn-success">Recent Contests</a>
    <#if adminUser??><a href="contest/add" class="btn btn-info">Add a contest</a></#if>
    <!-- <form class="form-search" action="contest/search" method="post">
      <div class="input-append">
        <input type="text" class="input-medium search-query" name="word" placeholder="Search Contest">
        <button type="submit" class="btn btn-info">Search</button>
      </div>
    </form> -->
  </div>
  <#include "../common/_paginate.html" />
  <@paginate currentPage=contestList.pageNumber totalPage=contestList.totalPage actionUrl="contest/" />
  <div class="pull-right">
    <span class="badge badge-info">${contestList.pageNumber}/${contestList.totalPage} Pages</span> 
    <span class="badge badge-info">${contestList.totalRow} Contests</span>
  </div>
</div>

<table id="Contest-list" class="table table-hover table-condensed">
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Start Time</th>
      <th>End Time</th>
      <th>Access</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <#if contestList??> 
    <#list contestList.list as Contest>
    <tr>
      <td><a href="contest/show/${Contest.cid!}">${Contest.cid!}</a></td>
      <td><a href="contest/show/${Contest.cid!}">${Contest.title!}</a></td>
      <td class="time">${Contest.startDateTime!}</td>
      <td class="time">${Contest.endDateTime!}</td>
      <td class="${Contest.ctype!} type-${Contest.type!}">${Contest.ctype!}</td>
      <td class="${Contest.cstatus!}">${Contest.cstatus!}</td>
    </tr>
    </#list> 
    </#if>
  </tbody>
</table>
<span class="time" id="current"></span>
</@override>

<@override name="scripts">
<link href="assets/tablecloth/css/tablecloth.css" type="text/css" rel="stylesheet">
<script src="assets/tablecloth/js/jquery.metadata.js"></script>
<script src="assets/tablecloth/js/jquery.tablesorter.min.js"></script>
<script src="assets/tablecloth/js/jquery.tablecloth.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    document.onkeydown=nextpage;
    var prevpage="contest/${contestList.pageNumber-1}<#if contestList.pageSize!=pageSize>-${contestList.pageSize}</#if>"
    var nextpage="contest/${contestList.pageNumber+1}<#if contestList.pageSize!=pageSize>-${contestList.pageSize}</#if>"
    function nextpage(event)
    {
        event=event?event:(window.event?window.event:null);
        <#if (contestList.pageNumber>1)>if(event.keyCode==37)location=prevpage;</#if>
        <#if contestList.pageNumber<contestList.totalPage>if(event.keyCode==39)location=nextpage;</#if>
    }
    
    var current_time = ${serverTime!}*1000;
    function updateCurrentTime() {
      $("#current").html(new Date(current_time).format("yyyy-MM-dd hh:mm:ss"));
      current_time += 1000;
    }
    setInterval(updateCurrentTime, 1000);
    
    <#if oj_style != "slate">
    $("#Contest-list").tablecloth({
      theme:"stats",
      condensed:true,
      sortable:true,
      striped:true,
      clean:true
    });
    </#if>
  });
</script>
</@override>
<@extends name="_layout.html" />
